<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>index</title>
	</head>
	<body>
		<!-- 下拉框 -->
		请选择省份：<select></select>
		请选择城市：<select></select>
		请选择县/区：<select></select>

	</body>
	<script type="text/javascript">
		//省份一维数组: provinceArr[省份下标]
		var provinceArr = ["福建", "广东"];

		// 市二维数组: cityArr[省份下标][城市下标]
		var cityArr = [
			["福州", "厦门", "莆田", "三明", "泉州", "漳州", "南平", "龙岩", "宁德", "其他"],
			["广州", "深圳", "东莞", "中山", "潮州", "揭阳", "云浮", "珠海", "汕头", "韶关", "佛山", "江门", "湛江", "茂名", "肇庆", "惠州", "梅州", "汕尾","河源","阳江", "清远"]
		];


		//区县三维数组: countyArr[省份下标][城市下标][县/区下标]
		var countyArr = [

			[
				["鼓楼区", "台江区", "仓山区", "马尾区", "晋安区", "福清市", "长乐市", "闽侯县", "闽清县", "永泰县", "连江县", "罗源县", "平潭县", "其他"],
				["思明区", "海沧区", "湖里区", "集美区", "同安区", "翔安区", "其他"],
				["城厢区", "涵江区", "荔城区", "秀屿区", "仙游县", "其他"],
				["梅列区", "三元区", "永安市", "明溪县", "将乐县", "大田县", "宁化县", "建宁县", "沙县", "尤溪县", "清流县", "泰宁县", "其他"],
				["鲤城区", "丰泽区", "洛江区", "泉港区", "石狮市", "晋江市", "南安市", "惠安县", "永春县", "安溪县", "德化县", "金门县", "其他"],
				["芗城区", "龙文区", "龙海市", "平和县", "南靖县", "诏安县", "漳浦县", "华安县", "东山县", "长泰县", "云霄县", "其他"],
				["延平区", "建瓯市", "邵武市", "武夷山市", "建阳市", "松溪县", "光泽县", "顺昌县", "浦城县", "政和县", "其他"],
				["新罗区", "漳平市", "长汀县", "武平县", "上杭县", "永定县", "连城县", "其他"],
				["蕉城区", "福安市", "福鼎市", "寿宁县", "霞浦县", "柘荣县", "屏南县", "古田县", "周宁县", "其他"],
				["其他"]
			],
			[
				["越秀区", "荔湾区", "海珠区", "天河区", "白云区", "黄埔区", "番禺区", "花都区", "南沙区", "萝岗区", "增城市", "从化市", "其他"],
				["福田区", "罗湖区", "南山区", "宝安区", "龙岗区", "盐田区", "其他"],
				["莞城", "常平", "塘厦", "塘厦", "塘厦", "其他"],
				["中山"],
				["湘桥区", "潮安县", "饶平县", "其他"],
				["榕城区", "揭东县", "揭西县", "惠来县", "普宁市", "其他"],
				["云城区", "新兴县", "郁南县", "云安县", "罗定市", "其他"],
				["香洲区", "斗门区", "金湾区", "其他"],
				["金平区", "濠江区", "龙湖区", "潮阳区", "潮南区", "澄海区", "南澳县", "其他"],
				["浈江区", "武江区", "曲江区", "乐昌市", "南雄市", "始兴县", "仁化县", "翁源县", "新丰县", "乳源瑶族自治县", "其他"],
				["禅城区", "南海区", "顺德区", "三水区", "高明区", "其他"],
				["蓬江区", "江海区", "新会区", "恩平市", "台山市", "开平市", "鹤山市", "其他"],
				["赤坎区", "霞山区", "坡头区", "麻章区", "吴川市", "廉江市", "雷州市", "遂溪县", "徐闻县", "其他"],
				["茂南区", "茂港区", "化州市", "信宜市", "高州市", "电白县", "其他"],
				["端州区", "鼎湖区", "高要市", "四会市", "广宁县", "怀集县", "封开县", "德庆县", "其他"],
				["惠城区", "惠阳区", "博罗县", "惠东县", "龙门县", "其他"],
				["梅江区", "兴宁市", "梅县", "大埔县", "丰顺县", "五华县", "平远县", "蕉岭县", "其他"],
				["城区", "陆丰市", "海丰县", "陆河县", "其他"],
				["源城区", "紫金县", "龙川县", "连平县", "和平县", "东源县", "其他"],
				["江城区", "阳春市", "阳西县", "阳东县", "其他"],
				["清城区", "英德市", "连州市", "佛冈县", "阳山县", "清新县", "连山壮族瑶族自治县", "连南瑶族自治县", "其他"]
			]
		];
		// 当框框加载完成之后调用设置省份
		window.onload = setProvince;

		// 获取省市县/区的select选择框对象
		var province = document.getElementsByTagName("select")[0];
		var city = document.getElementsByTagName("select")[1];
		var county = document.getElementsByTagName("select")[2];

		// 设置省份
		function setProvince() {
			// 遍历省份数组, provinceArr在city.js中
			for (var i = 0; i < provinceArr.length; i++) {
				// 创建省份option选项
				var opt = document.createElement("option");
				opt.value = provinceArr[i]; // 设置value-提交给服务器用
				opt.innerHTML = provinceArr[i]; // 设置option文本显示内容
				province.appendChild(opt); // 追加城市到下拉框

				// 当省份发生变化更改城市
				province.onchange = function() {
					setCity(this.selectedIndex);
				};
			}

			// 省份加载完成，默认显示第一个省份的城市
			setCity(0);
		}

		// 设置城市
		function setCity(provincePos) {
			// 获取省份对象的城市，cityArr在city.js中
			var citys = cityArr[provincePos];
			city.length = 0; // 清空长度，重新从0开始赋值下拉框

			for (var i = 0; i < citys.length; i++) {
				// 创建城市option选项
				var opt = document.createElement("option");
				opt.value = citys[i]; // 设置value-提交给服务器用
				opt.innerHTML = citys[i]; // 设置option文本显示内容

				city.appendChild(opt);
				city.onchange = function() {
					setCounty(provincePos, this.selectedIndex);
				}
			}

			// 默认显示城市的第一个县/区
			setCounty(provincePos, 0);
		}

		// 设置县/区, 县/区是三位数组，需要传入哪个省份和城市
		function setCounty(provincePos, cityPos) {
			// 获取县/区，countyArr在city.js中国
			var countys = countyArr[provincePos][cityPos];
			county.length = 0;

			for (var i = 0; i < countys.length; i++) {
				// 创建县/区option选项
				var opt = document.createElement("option");
				opt.value = countys[i]; // 设置value-提交给服务器用
				opt.innerHTML = countys[i]; // 设置option文本显示内容
				county.appendChild(opt); // 追加到县/区选择框中
			}
		}
	</script>
</html>
